<template>
  <div class="menu-manage">
    <!-- 顶部操作区 -->
    <div class="operation-bar">
      <el-button type="primary" @click="handleAdd">
        <el-icon><Plus /></el-icon>添加菜单
      </el-button>
    </div>

    <!-- 表格区域 -->
    <el-table
      :data="tableData.slice((currentPage-1)*pageSize, currentPage*pageSize)"
      style="width: 100%"
      :height="600"
      border
    >
      <el-table-column type="index" label="序号" width="60" />
      <el-table-column prop="menuName" label="菜单名称" width="180" />
      <el-table-column prop="icon" label="菜单图标" width="100">
        <template #default="scope">
          <el-icon :size="20">
            <component :is="scope.row.icon" />
          </el-icon>
        </template>
      </el-table-column>
      <el-table-column prop="description" label="菜单描述" show-overflow-tooltip />
      <el-table-column prop="sort" label="排序" width="80" />
      <el-table-column prop="createTime" label="创建时间" width="180" />
      <el-table-column prop="status" label="状态" width="100">
        <template #default="scope">
          <el-tag :type="scope.row.status ? 'success' : 'info'">
            {{ scope.row.status ? '启用' : '禁用' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="150" fixed="right">
        <template #default="scope">
          <el-button 
            type="primary" 
            :icon="Edit"
            circle
            @click="handleEdit(scope.row)"
            title="编辑"
          />
          <el-button 
            type="danger" 
            :icon="Delete"
            circle
            @click="handleDelete(scope.row)"
            title="删除"
          />
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <div class="pagination">
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[10, 20, 30, 50]"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
      />
    </div>

    <!-- 添加/编辑对话框 -->
    <el-dialog
      v-model="dialogVisible"
      :title="dialogType === 'add' ? '添加菜单' : '编辑菜单'"
      width="500px"
    >
      <el-form :model="form" label-width="100px" :rules="rules" ref="formRef">
        <el-form-item label="菜单名称" prop="menuName">
          <el-input v-model="form.menuName" placeholder="请输入菜单名称"/>
        </el-form-item>
        <el-form-item label="菜单图标" prop="icon">
          <el-select v-model="form.icon" placeholder="请选择图标" style="width: 100%">
            <el-option
              v-for="icon in iconList"
              :key="icon"
              :label="icon"
              :value="icon"
            >
              <el-icon>
                <component :is="icon" />
              </el-icon>
              <span style="margin-left: 8px">{{ icon }}</span>
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="菜单描述" prop="description">
          <el-input 
            v-model="form.description" 
            type="textarea"
            :rows="3"
            placeholder="请输入菜单描述"
          />
        </el-form-item>
        <el-form-item label="排序" prop="sort">
          <el-input-number v-model="form.sort" :min="1" :max="99" />
        </el-form-item>
        <el-form-item label="状态">
          <el-switch v-model="form.status" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleSubmit(formRef)">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { Edit, Delete, Plus } from '@element-plus/icons-vue';
import { ElMessage, ElMessageBox } from 'element-plus';

// Element Plus 图标列表
const iconList = [
  'Setting', 'HomeFilled', 'Menu', 'Location', 'Document', 
  'Flag', 'User', 'Bell', 'Message', 'Star', 
  'Calendar', 'Search', 'Service', 'Odometer', 'Promotion',
  'Picture', 'SwitchFilled', 'Grid'
];

// 表单校验规则
const rules = {
  menuName: [
    { required: true, message: '请输入菜单名称', trigger: 'blur' },
    { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
  ],
  description: [
    { required: true, message: '请输入菜单描述', trigger: 'blur' }
  ],
  icon: [
    { required: true, message: '请选择菜单图标', trigger: 'change' }
  ],
  sort: [
    { required: true, message: '请输入排序号', trigger: 'blur' }
  ]
};

// 分页相关
const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(0);

// 对话框相关
const dialogVisible = ref(false);
const dialogType = ref('add');
const formRef = ref(null);
const form = ref({
  menuName: '',
  description: '',
  icon: '',
  sort: 1,
  status: true
});

// 模拟数据
const tableData = ref([
  {
    id: 1,
    menuName: '基础菜单',
    description: '系统基础功能菜单',
    icon: 'Setting',
    sort: 1,
    createTime: '2024-01-01 10:00:00',
    status: true
  },
  {
    id: 2,
    menuName: '业务菜单',
    description: '系统业务功能菜单',
    icon: 'Folder',
    sort: 2,
    createTime: '2024-01-02 14:30:00',
    status: true
  }
]);

// 计算总数
total.value = tableData.value.length;

// 添加菜单
const handleAdd = () => {
  dialogType.value = 'add';
  form.value = {
    menuName: '',
    description: '',
    icon: '',
    sort: 1,
    status: true
  };
  dialogVisible.value = true;
};

// 编辑菜单
const handleEdit = (row) => {
  dialogType.value = 'edit';
  form.value = { ...row };
  dialogVisible.value = true;
};

// 删除菜单
const handleDelete = (row) => {
  ElMessageBox.confirm(
    '确定要删除该菜单吗？',
    '警告',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      const index = tableData.value.findIndex(item => item.id === row.id);
      if (index !== -1) {
        tableData.value.splice(index, 1);
      }
      ElMessage.success('删除成功');
    })
    .catch(() => {
      ElMessage.info('已取消删除');
    });
};

// 提交表单
const handleSubmit = async (formEl) => {
  if (!formEl) return;
  
  await formEl.validate((valid) => {
    if (valid) {
      if (dialogType.value === 'add') {
        const newMenu = {
          id: Date.now(),
          ...form.value,
          createTime: new Date().toLocaleString()
        };
        tableData.value.push(newMenu);
        ElMessage.success('添加成功');
      } else {
        // 编辑逻辑
        const index = tableData.value.findIndex(item => item.id === form.value.id);
        if (index !== -1) {
          tableData.value[index] = { ...form.value };
        }
        ElMessage.success('修改成功');
      }
      dialogVisible.value = false;
    }
  });
};
</script>

<style scoped>
.menu-manage {
  padding: 20px;
}

.operation-bar {
  margin-bottom: 20px;
}

.pagination {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}

.el-button {
  margin-right: 10px;
}

:deep(.el-table) {
  margin-top: 20px;
}

:deep(.el-dialog__body) {
  padding: 20px;
}

.el-select-dropdown__item {
  display: flex;
  align-items: center;
}

:deep(.el-select-dropdown__item) {
  display: flex;
  align-items: center;
}
</style>
